<template>
    <view class="canvas">
        <view class="canvas_header">
            <view class="leftMsg">
                <view class="tips">
                    请在上方空白处书写您的签字
                </view>
                <view class="btn">
                    <nut-button plain type="info" style="margin-right: 20rpx; border-radius: 16rpx; width: 270rpx"
                        @click="clearArea()">清除重写</nut-button>
                    <nut-button type="info" style="border-radius: 16rpx; width: 270rpx" @click="saveImage">提交签字</nut-button>
                </view>
            </view>
        </view>
        <view class="canvas_canvas">
            <canvas id="canvas" ref="canvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
                canvas-id="myCanvas" style="width:
            100vw;height:100vh;background-color:#C4C4C4" />
        </view>
    </view>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { ref } from 'vue'

import useOrderStore from '@/store/order'
import { CanvasTouchEvent } from '@tarojs/components'
const orderStore = useOrderStore()

const ishas = ref(false)
const touchPressed = ref(false)
const strokeStyle = "#000000" //书写颜色
const lineWidth = 4 //线条宽度
const lastX = ref(0)
const lastY = ref(0)
const canvas = ref()
const context = Taro.createCanvasContext('myCanvas')


function touchstart(e: any) {
    e.preventDefault(); // 阻止浏览器默认事件，重要
    var touch = e.touches[0];
    touchPressed.value = true;
    draw(
        touch.pageX,
        touch.pageY,
        false
    );
}
function touchmove(e: any) {
    ishas.value = true;
    if (e.touches.length == 1) {
        e.preventDefault(); // 阻止浏览器默认事件，重要
        var touch = e.touches[0];
        if (touchPressed) {
            draw(
                touch.pageX,
                touch.pageY,
                true
            );
        }
    }
}
function touchend(e: CanvasTouchEvent) {
    if (e.touches.length == 1) {
        e.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
        touchPressed.value = false;
    }
}

function draw(x: number, y: number, isDown: boolean) {
    if (isDown) {
        context.beginPath();
        context.strokeStyle = strokeStyle
        context.lineWidth = lineWidth;
        context.lineJoin = "round";
        context.moveTo(lastX.value, lastY.value);
        context.lineTo(x, y);
        context.closePath();
        context.stroke();
        context.draw(true)
    }
    lastX.value = x;
    lastY.value = y;
}
// 重写
function clearArea() {
    const query = Taro.createSelectorQuery()
    query.select('#canvas').boundingClientRect(rec => {
        console.log(rec);

        context.setTransform(1, 0, 0, 1, 0, 0);
        context.clearRect(0, 0, rec.width, rec.height);
        context.draw()
        ishas.value = false;
    }).exec()
}
// 保存本地
async function saveImage() {
    if (ishas.value) {
        // 获取图片路径
        Taro.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success(res1) {
                orderStore.imgUrl = res1.tempFilePath
                Taro.navigateBack()
            }
        })
    } else {
        Taro.showToast({
            icon: 'error',
            title: '请签名'
        })
    }
}
</script>

<style lang="scss">
.canvas {
    height: 100%;
    display: flex;
    overflow: hidden;
}

.leftMsg {
    height: 176rpx;
    width: 1100rpx;
    transform: rotate(90deg);
    left: -500rpx;
    top: 500rpx;
    position: absolute;
    display: flex;
    justify-content: space-between;

    .tips {
        width: 900rpx;
        font-size: 24rpx;
        color: #999999;
        width: 600rpx;
        line-height: 80rpx;
    }

    .btn {
        width: 580rpx;
        display: flex
    }
}

.canvas_header {
    position: relative;
    width: 176rpx;
    height: 100%;
}

.canvas_canvas {
    height: 100%;
    width: 560rpx;
}

.aaaaaa {
    position: absolute;
    font-size: 52rpx;
    top: 50%;
}

.canvas_info {
    margin: 20rpx 8%;
    font-size: 24rpx;
}
</style>